<template>
    <div class="sign-in">
        <div>
            <span class="icon_phone"><i class="fa fa-mobile"></i></span>
            <input type="text" class="telephone" placeholder="手机号" v-model="telephone.value">
        </div>
        <div>
            <span class="icon_lock"><i class="fa fa-lock"></i></span>
            <span class="icon-eye" @click="peep"><i class="fa fa-eye"></i></span>
            <input type="password" class="password" placeholder="密码" v-model="password.value">
        </div>
        <button type="button" ref="btn" @click="submit">登录</button>
    </div>
</template>

<script>
    //坑:在.babelrc文件的plugins中加入["component", [{"libraryName": "mint-ui","style": true}]],会导致Toast默认样式失效
    import { Toast,Indicator } from 'mint-ui'
    export default {
        mounted(){},
        data(){
            return {
                telephone : {
                    value: '',
                    pattern : /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                    message : {
                        blank : '手机号不能为空!',
                        illegal : '手机号格式不正确!'
                    }
                },
                password : {
                    value: '',
                    //必须包含字母和数字
                    pattern : /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{6,12}$/,
                    message : {
                        blank : '密码不能为空!',
                        illegal : '密码格式不正确!'
                    }
                }
            }
        },
        methods : {
            peep(){
                var i = document.querySelector('.icon-eye i')
                i.classList.toggle('fa-eye-slash')
                i.classList.toggle('fa-eye')
                if(i.classList.contains('fa-eye'))
                    document.querySelector('.password').type = 'password'
                else
                    document.querySelector('.password').type = 'text'
            },
            submit(){
                this.$refs.btn.disabled = true
                this.$refs.btn.style.opacity = .8
                var itemList = ['telephone','password']
                for(var i = 0; i < itemList.length; ++i){
                    if(this[itemList[i]].value === '' || !this[itemList[i]].pattern.test(this[itemList[i]].value)){
                        var timer = setTimeout(() => {
                            this.$refs.btn.disabled = false
                            this.$refs.btn.style.opacity = 1
                            clearTimeout(timer)
                         },2000)
                        if(this[itemList[i]].value === '')
                            return Toast({
                            message : this[itemList[i]].message.blank,
                            iconClass: 'fa fa-close',
                            duration : 2000
                        })
                        return Toast({
                            message : this[itemList[i]].message.illegal,
                            iconClass: 'fa fa-close',
                            duration : 2000
                        })
                    }
                }
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
                this.$http.post('/api/login',{
                    params : {
                        telephone : this.telephone.value,
                        password : this.password.value
                    }
                }).then(function(res){
                    Indicator.close();
                    var result = res.data
                    var timer = setTimeout(() => {
                                    clearTimeout(timer)
                                    if(result.status === -1 || result.status === 1){
                                        this.$refs.btn.disabled = false
                                        this.$refs.btn.style.opacity = 1
                                    }
                                    else{
                                        this.$router.push({path : '/home'})
                                    }
                                },2000)
                    if(result.status === -1)
                        return Toast({
                            message: '出错啦!',
                            iconClass: 'fa fa-close',
                            duration : 2000
                        });
                    if(result.status === 1)
                        return Toast({
                            message: '账号或密码不存在!',
                            iconClass: 'fa fa-close',
                            duration : 2000
                        });
                    if(result.status === 0){
                        this.$store.commit('setUser',result.user)
                        Toast({
                            message: '登录成功!',
                            iconClass: 'fa fa-check',
                            duration : 2000
                        });
                    }
                },function(err){
                    Indicator.close();
                    this.$refs.btn.disabled = true
                    this.$refs.btn.style.opacity = 1
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .sign-in{
        width:100%;
        div{
            position: relative;
            span{
                position: absolute;
                line-height:50px;
                font-size:20px;
                color:#969696;
                &.icon_phone{
                     left:14px;
                     font-size:28px;
                 }
                &.icon_lock{
                     left:14px;
                 }
                &.icon-eye{
                     right:10px;
                 }
            }
        }
        input{
            border: 1px solid #c8c8c8;
            border-top: 0;
            width: 100%;
            height: 50px;
            padding: 4px 12px 4px 35px;
            border-radius: 0;
            background-color: hsla(0,0%,71%,.1);
            &.telephone{
                 border-top: 1px solid #c8c8c8;
                 border-top-left-radius: 4px;
                 border-top-right-radius: 4px;
             }
            &.password{
                 border-bottom-left-radius: 4px;
                 border-bottom-right-radius: 4px;
             }
        }
        button{
            margin-top: 20px;
            width: 100%;
            padding: 9px 18px;
            font-size: 18px;
            border-radius: 25px;
            color: #fff;
            display: block;
            background: #3194d0;
        }
    }
</style>
